<template>
	<view class="items">
		<view class="list">
			<view class="list-content" v-for="(item,index) in selectStore" :key='item.storeId' @click="goPage(item)">
				<view class="image">
					<image :src="item.storeImg" style="width: 146rpx;height: 146rpx;background-color: #EEEEEE" mode="aspectFit"></image>
				</view>
				<view class="list-right">
					<view class="list-right-title">
						<text>{{item.storeName}}</text>
					</view>
					<view class="list-right-content">
						<view class="address">{{item.storeAddress}}</view>
						<view :class="item.isGover===true?'isGover':''">{{item.isGover===true?'自营' : ''}}</view>
						<view class="rZ">门店认证</view>
						<view class="isMoney" v-if="item.isMoney===true">
						<i-icon icon="iconbao_1" color="#FBB000" size="30rpx"></i-icon>
						</view>
					</view>
					<view class="list-right-fans">
						<text class="fans">
							粉丝：{{item.fansCount}}
						</text>
						<text class="distance">
							{{item.distance}}
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="defaultMap" v-if="!selectStore.length">
			<image src="/static/img/images/tu.png" mode=""></image>
			<view class="texna">
				暂无更多信息，看看其他的吧
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
				selectStore: {
					type: Array,
					default: () => []
				}
		},
		data() {
			return {

			}
		},
		methods: {
			goPage(list){
				console.log(list)
				uni.navigateTo({
					url:'/pages_common/store/store?id='+list.storeId
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	//默认图
	.defaultMap {
		padding-top: 100rpx;
		width: 100%;
		// height: 85vh;
		text-align: center;
		image {
			width: 263rpx;
			height: 277rpx;
		}

		.texna {
			font-size: 28rpx;
			color: #999999;
		}
	}

	.items {
		height: 90vh;
		background-color: #fff;
		.list {
			border-top: 4rpx solid #EEEEEE;
			background-color: #FFFFFF;
			.list-content {
				margin-top: 20rpx;
				width: 100%;
				line-height: 50rpx;
				display: flex;
				.address {
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
				}
				.isGover {
					text-align: center;
					width: 90rpx;
					margin-left: 20rpx;
					height: 40rpx;
					background: linear-gradient(-90deg, #FDD421, #FFE23E);
					border-radius: 10rpx;
					line-height: 40rpx;
				}
				.rZ {
					margin-left: 20rpx;
					width: 120rpx;
					text-align: center;
					height: 40rpx;
					background: #60C534;
					border-radius: 15rpx;
					color: #FEFEFE;
					font-weight: lighter;
					line-height: 40rpx;
					font-size: 18rpx;
				}
				.isMoney {
					margin-left: 20rpx;
					line-height: 40rpx;
				}
			}
			.image {
				margin: 0rpx 0 0 20rpx
			}

			.list-right {
				width: 100%;

				.list-right-title {
					margin-left: 32rpx;
				}

				.list-right-content {
					display: flex;
					margin-left: 32rpx;
				}

				.list-right-fans {
					.fans {
						margin-left: 32rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #666666;
					}

					.distance {
						float: right;
						margin-right: 22rpx;
					}
				}
			}
		}
	}
</style>
